<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>通用菜单</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="../js/vue.js"></script>
  <script src="../js/jquery-1.11.3.min.js"></script>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/common.css">
  <!-- 引入对应模块的css -->
  <link rel="stylesheet" href="../css/generalMenu.css">

  <link rel="stylesheet" href="../js/jQuery-emoji/lib/css/jquery.mCustomScrollbar.min.css">
  <link rel="stylesheet" href="../js/jQuery-emoji/src/css/jquery.emoji.css">
</head>
<body>
    <div id="app">
        <!-- 头部 -->
        <top-bar ref="topbar"></top-bar>
        <!-- 开始 -->
        <div class="displayCenter">
            <!-- 左边导航 -->
            <div class="leftBox"> <left-site :pagetype="pagetype"></left-site></div>
            <div class="pageContent fffBackground">
               <section class="weizhi">您当前所在的位置：站点设置>公众号管理>自定义菜单设置</section>

               <section class="someTitle displayBetween">
                    <div>自定义菜单设置</div>
                    <span class="activeBtn">同步微信后台菜单</span>
               </section>
               <!-- 主tab切换 -->
               <section class="menuTabber displayBetween">
                    <div class="menuTabber-left">
                        <section class="Tabber" 
                                 @click="chooseMenu(index)"
                                 :class="{'activeTabber':cuurentIndex==index}"
                                 v-for="(item,index) in [{'menuName':'通用菜单','des':'全部粉丝看到的菜单'},{'menuName':'个性菜单','des':'指定粉丝看到的菜单'}]" :key="index">
                            <h3>{{item.menuName}}</h3>
                            <p>{{item.des}}</p>
                        </section>
                       
                    </div>
                    <span class="menuTabber-right"> 
                        <p> <img src="../img/u701.png" /> 当前绑定的公众号未认证，仅可选择已同步到微信的素材，审核中的素材暂不支持使用</p>
                         <span  class="menuDes">自定义菜单说明 <img src="../img/gzhInfo01.png"/>
                        
                        <!-- 描述说明 -->
                        <div class="menuDescription">
                                <section>
                                    1.个性菜单仅限已认证公众号使用，未认证公众号只能创建一个通用菜单；<br>
                                    2.粉丝同时符合多个菜单规则，按菜单从上到下匹配规则展示；粉丝有超过1个标签时，以最后打上的标签优先匹配；<br>
                                    3.删除默认菜单，个性化菜单也会全部删除；<br>
                                    4.非认证公众号菜单只能微信的素材。<br>
                                    6.解绑公众号前，请删除个性化菜单，以保证之后该公众号自定义菜单正常使用。
                                    <i class="arrow arrow_out"></i>
                                    <i class="arrow arrow_in"></i>
                                </section>
                        </div>
                        </span> 
                        
                    </span>
                       
               </section>

               <!-- 自定义菜单  -->
               <section class="customMessage" v-if="cuurentIndex==1">
                   <div class="custom-choose">
                    菜单名称
                    <select>
                        <option>新建菜单</option>
                    </select>
                    <span>+新建个性菜单</span>
                   </div>
                   <div class="custom-defined">
                        <span>目标人群:按微信标签筛选 
                            <img src="../img/gzhInfo01.png" />
                            <select> <option>标签1</option><option>标签1</option> <option>标签1</option> <option>标签1</option> </select> 
                        </span>

                        <span>性别
                                <img src="../img/gzhInfo01.png" />
                                <select> 
                                    <option value="0">全部</option>
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select> 
                        </span>
                        <span>语言
                                <img src="../img/gzhInfo01.png" />
                                <select> 
                                    <option :value="op.keys" v-for="(op,i) in languages" :key="i">{{op.values}}</option>
                                    
                                </select> 
                        </span>
                        <span>手机操作系统
                                <img src="../img/gzhInfo01.png" />
                                <select> 
                                    <option value="0">全部</option>
                                    <option value="1">IOS</option>
                                    <option value="2">Android</option>
                                    <option value="3">Others</option>
                                </select> 
                        </span>
                        <span>地区
                                <img src="../img/gzhInfo01.png" />
                                <section>      
                                        <img src="../img/arrowDown3.png" />
                                </section> 
                        </span>
                   </div>
               </section>
               <!-- 菜单编辑部分 -->
               <section class="menuContent displayBetween">
                   <!-- 左侧微信模拟框 -->
                    <div class="menuContent-left">
                        <img src="../img/weixinHead.png" class="weixinHead"/>
                        <section style="height:360px;width:100%;background:#F9F9F9"></section>
                        <section class="weixinBottom displayBetween">
                            <div class="weixinJianPan"><img src="../img/jianpan.png" /></div>
                            
                            <div class="menuParts displayBetween">
                                <span class="mainMenu" 
                                v-for="(item,index) in menuParts" :key="index"
                                :class="{'activeMainMenu':curentMenuIndex2==index}"
                                >
                                    <a @click="chooseMainMenu(index,item)" style="display: inline-block;line-height: 48px;width: 100%;">{{item.fName}}</a> 
                                    <div class="childrenMenu-box" v-if="curentMenuIndex==index">
                                        <ul >
                                            <li 
                                            @click="chooseChildMenu(index2,child)" 
                                            v-for="(child,index2) in item.children" 
                                             class="ellipsis1"
                                             :class="{'activeChild':curentChildIndex==index2}"
                                             >{{child.fName}}
                                            </li>
                                            <li @click="addChildMenu(item.children,index)" v-if="!item.children||item.children.length<5" style="font-size:14px;font-weight:bold;color:#333333">+</li>
                                        </ul>
                                        <i class="arrow arrow_out"></i>
                                        <i class="arrow arrow_in"></i>
                                    </div>
                                 
                                </span>

                                <span v-if="menuParts.length<3" :class="{'noMenu-span':menuParts.length==0}" style="font-size:14px;font-weight:bold;color:#333333;position:relative" @click="addNewMain">+
                                    <div class="addTip" v-if="menuParts.length==0">
                                        <img src="../img/generalMenu01.png" />请点击【+】号添加主菜单
                                        <i class="arrow arrow_out"></i>
                                        <i class="arrow arrow_in"></i>
                                    </div>
                                </span>
                            </div>
                        </section>
                    </div>
                    <!-- 右侧内容 -->
                    <div class="menuContent-right" v-if="!afterDelete">

                        <section class="right-menuName displayBetween">
                            <div v-if="menuParts.length>0">菜单名称 
                                <input v-model="chooseMenuName" placeholder="请输入菜单名称" @blur="blurMenuName" @input="inputMenuName" /> 
                                <i style="color:#999999;" v-show="outLength">{{menuNameTip}}</i>
                            </div>
                            <div v-if="menuParts.length==0" style="line-height:40px">
                                  尚未设置菜单
                            </div>
                            <span :class="{'disabledSpan':menuParts.length==0}" @click="deleteMenu"> 删除菜单 </span>
                        </section>

                        <!-- 右侧没有主菜单时候展示的内容 -->
                        <section class="noMenu"  v-if="menuParts.length==0">
                            <img src="../img/generalMenu02.png" />
                            <p>请添加主菜单</p>
                        </section>
                        <!-- 菜单内容 radio切换 -->
                        <section class="menuContRadio" v-if="menuParts.length!=0&&showRight">
                            <span style="margin-right:10px">菜单内容</span>
                            <label @click="chooseRadio(item.value)"  :for="'radio-'+item.value" v-for="(item,index) in radioBox"><input :id="'radio-'+item.value" name="radio" type="radio" :value="item.value" v-model="radioValue" />{{item.name}} <span class="xuniRadio"></span> </label>   
                           
                        </section>
                        <!-- 每个radio对应的内容 -->
                        <section class="intContent" v-show="menuParts.length!=0" >
                            <div class="intContent-title" v-if="showRight">
                                <section class="intContent-title1" v-if="radioValue!=2">
                                    <img src="../img/generalMenu03.png" />{{intContentTitle}}
                                </section>
                                <section class="intContent-title2" v-if="radioValue==2">

                                     <span :class="[item.class,{'activeTitle2':title2Type==index}]"
                                      v-for="(item, index) in [{'class':'wenzi','text':'文字'},{'class':'tupian','text':'图片'},{'class':'yinpin','text':'音频'},{'class':'shipin','text':'视频'},{'class':'tuwen','text':'图文'}]"
                                      @click="chooseTitle2(index)"
                                      >
                                        <i></i>{{item.text}}
                                     </span>
                                    
                                </section> 
                        
                            </div>
                            <div class="intContent-body" v-if="showRight">
                                <!-- 微站页面 -->
                               <section class="radio1" v-show="radioValue==0">
                                  <div class="radio1-row" >
                                      <span>页面类型:</span> 
                                      <select style="position:relative;" v-model="fRelatedPageType" @change="choosePageType(fRelatedPageType)"  :class="{'lineOne':fRelatedPageType==-1}">
                                           <option :value="item.value"

                                           
                                            v-for="(item,index) in [{'name':'--请选择--','value':'-1'},{'name':'微站页面','value':'0'},{'name':'微站资源数据','value':'1'},{'name':'会员中心','value':'2'},{'name':'购物车','value':'3'}]">{{item.name}}</option>
                                           <!-- <option value="0" >微站页面</option>
                                           <option value="1">微站资源数据</option>
                                           <option value="2">会员中心</option>
                                           <option value="3">购物车</option> -->
                                      </select>
                                      <img class="arrowDown1" src="../img/arrowDown2.png" />
                                 </div>  
                                 <div class="radio1-row" v-if="fRelatedPageType==0">
                                        <span>跳转页面:</span> 
                                        <section id="moniSelect1" class="moniSelect" @click.self="showUl" :class="{'lineOne':ulText=='--请选择--'}">
                                            <img class="arrowDown" src="../img/arrowDown2.png" />
                                            {{ulText}}
                                            <ul v-if="ulShow" style="z-index: 10;">
                                                <li @click="chooseWeizhanPage(item)" v-for="(item,index) in weizhan" :key="index" class="list">{{item.name}}</li>
                                                <p style="text-align: center;color: #D7D7D7;line-height:40px;" v-show="weizhan.length==0">您还未创建微站</p>
                                                <div>+创建微站</div>
                                            </ul>

                                        </section>
                                </div>  
                                <div class="radio1-row" v-if="fRelatedPageType!=1&&fRelatedPageType!=-1">
                                    <span>页面链接:</span>
                                    <input disabled :value="fRelatedRedirectPageUrl"/>
                                </div>
                                <div class="radio1-row" style="margin-top:20px;" v-if="fRelatedPageType==1">
                                    <span>站内素材:</span>
                                   <section class="sucaiPart" v-if="sucaiObj">
                                       <!-- 产品、服务展示样式 -->
                                       <div class=" displayBetween" v-if="sucaiObj.type ==0||sucaiObj.type ==1">
                                            <div class="sucaiBaner">
                                                <img :src="sucaiObj.li.mainImg"  />
                                            </div>
                                            <div class="sucaiCont">
                                                <p>SKU：{{sucaiObj.li.SKU}}</p>
                                                <p>产品ID：{{sucaiObj.li.ids}}</p>
                                                <p class="ellipsis1">{{sucaiObj.li.name}}</p>
                                            </div>
                                       </div>
                                       <!-- 咨询展示样式 -->
                                       <div class=" displayBetween" v-if="sucaiObj.type ==2">
                                            <div class="sucaiBaner" v-if="sucaiObj.li.mainImg" style="position:relative;">
                                                <img :src="sucaiObj.li.mainImg"  />
                                                <img v-if="sucaiObj.li.type==1" src="../img/play.png" style="width:20px;height:22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);" />
                                            </div>
                                            <div class="sucaiCont">
                                                <h3 class="sucaiTitle ellipsis2" style="font-size:14px;line-height: 20px;"> {{sucaiObj.li.title}}</h3> 
                                                <div class="sucaiDate" style="line-height:20px;">
                                                    <span style="background:#122F46;display:inline-block;width:30px;height:16px;text-align:center;line-height:16px;color:#fff;">{{sucaiObj.li.type==0?'图文':'视频'}}</span> 
                                                    {{sucaiObj.li.date}}
                                                </div>
                                            </div>
                                       </div>
                                       <!-- 文章、音频、专辑、创作人展示样式 -->
                                       <div class=" displayBetween" v-if="sucaiObj.type ==3||sucaiObj.type ==4||sucaiObj.type ==5||sucaiObj.type ==6||sucaiObj.type ==7">
                                            <div class="sucaiBaner" v-if="sucaiObj.li.mainImg" style="position:relative;">
                                                <img :src="sucaiObj.li.mainImg"  />
                                        
                                            </div>
                                            <div class="sucaiCont">
                                                <h3 class="sucaiTitle ellipsis2" style="font-size:14px;line-height: 20px;"> {{sucaiObj.li.title}}</h3> 
                                                <div class="sucaiDate" style="line-height:20px;">
                            
                                                    {{sucaiObj.li.date}}
                                                </div>
                                            </div>
                                       </div>
                                       <img class="sucaiColse" src="../img/sucaiClose.png" @click="deleteSucai" />
                                       
                                   </section>
                                   <span v-if="!sucaiObj" class="addSucai" @click="addSucai">+添加站内素材</span>
                                </div>
                               </section>
                                 <!-- 跳转网页 -->
                                <section class="radio2" v-show="radioValue==1">
                                    <div >
                                        <label class="myLabel"><input id="urlRadio" name="urlRadio" type="radio" checked="checked" />跳转链接<span class="xuniRadio"></span> </label>   
                                        <input v-model="urlTo" placeholder="请输入跳转链接" /> <span style="color:red" v-show="urlToVerify">请输入正确的跳转链接</span>
                                        <div class="addUrlBtn" @click="showWrapDialog('tuwen')">+图文链接</div>
                                    </div>
                                </section>
                                <!-- 发送消息 -->
                                <section class="radio3" v-show="radioValue==2">
                                    <div class="radio3-row" v-show="title2Type==0">
                                        <div class="wenziContent">                                                                                                                                                                                                         
                                            <div class="editor-box" contenteditable="true" id="editorMenu" @blur="editorBlur" @input="editorInput($event)" v-html="editorContent">                                            
                                            </div>                                                                                                                                                                                                                                                      
                                            <section class="editor-bottom">                                                                                                                                                                                                                             
                                                    <img src="../img/emjoi.png" id="btn1"  v-if="zfCount>4"/>                                                                                                                                                                                                
                                                    <img src="../img/emjoi.png"  id="btn2" v-if="zfCount<4"/>                                                                                                                                                                                                
                                                    <a class="color337AB7-a" @click="insertFans"> 第*位粉丝</a> <a class="color337AB7-a"  @click="insertName"> 插入昵称</a>                                                                                                                                 
                                                    <a class="color337AB7-a insertHref" @click.self="insertHref"> 插入超链接                                                                                                                                                                                
                                                        <div v-if="isinsertHref" class="hrefDialog">                                                                                                                                                                                                       
                                                            <section class="hrefDialog-content">                                                                                                                                                                                                           
                                                                    <div class="hrefDialog-content-row">                                                                                                                                                                                                          
                                                                      文本内容: <input type="text"  @input="inputHrefText" v-model="insertHrefText" :class="{'error-input':hrefTextVerify}">                                                                                                                      
                                                                      <span v-if="hrefTextVerify">※ {{hrefTextTip}}</span>                                                                                                                                                                                        
                                                                    </div>                                                                                                                                                                                                                                        
                                                                    <div class="hrefDialog-content-row">                                                                                                                                                                                                          
                                                                      链接地址: <input type="text"  v-model="insertHrefUrl" :class="{'error-input':hrefUrlVerify}">                                                                                                                                               
                                                                      <span v-if="hrefUrlVerify">※ 请输入内容</span>                                                                                                                                                                                              
                                                                    </div>                                                                                                                                                                                                                                        
                                                                    <div class="hrefDialog-content-btn">                                                                                                                                                                                                          
                                                                       <span class="activeBtn" @click="saveHref" :class="{'disabled-span':hrefTextVerify||hrefUrlVerify}">保存</span> <span @click="insertHref">取消</span>                                                                                       
                                                                    </div>                                                                                                                                                                                                                                        
                                                                    <span class="bot"></span>                                                                                                                                                                                                                     
                                                            </section>                                                                                                                                                                                                                                      
                                                        </div>                                                                                                                                                                                                                                              
                                                    </a>                                                                                                                                                                                                                                                    
                                                    <p>还可以输入{{zfCount}}个字，按Enter键换行</p>                                                                                                                                                                                                          
                                            </section>                                                                                                                                                                                                                                                              
                                        </div>  
                                    </div>
                                    <div class="radio3-row" :class="{'displayCenter':!messageTupian}" v-show="title2Type==1">
                                        <section class="radio3-imgBox" style="margin-right:20px" @click="showWrapDialog('tupian')" v-if="!messageTupian">
                                            <img src="../img/tupiansucai.png" />
                                            <p>从素材库中选择</p>
                                        </section>
                                        <section class="radio3-imgBox" v-if="!messageTupian">
                                            <img src="../img/tupiansucai-add.png" />
                                            <p>添加素材</p>
                                            <input type='file' name="upload"  class="image" accept="image/*" @change="uploadFile($event)">
                                        </section>
                                        <section v-if="messageTupian" style="padding:10px 20px 60px ">
                                                <div class="createdGroup-row">
                                                        <div class="imgAndPOI">
                                                            <section class="imgAndPOI-box">
                                                                <img class="box-bannerImg" :src="messageTupian.imgUrl"/>
                                                                <div class="box-imgName">{{messageTupian.name}}</div>
                                                            </section>
                                                            <section class="operation-box">
                                                
                                                                <p @click="deleteMessage('tupian')"> <img src="../img/deleteBtn.png" > 删除</p>
                                                                <p @click="showWrapDialog('tupian')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                                            </section>
                                                           
                                                        </div>
                                                        
                                                        
                                                    </div>
                                        </section>
                                    </div>

                                    <div class="radio3-row " :class="{'displayCenter':!messageYinpin}" v-show="title2Type==2">
                                        <section class="radio3-imgBox" style="margin-right:20px" @click="showWrapDialog('yinpin')"  v-if="!messageYinpin">
                                            <img src="../img/yinpinsucai.png" />
                                            <p>从微信素材库中选择</p>
                                        </section>
                                        <section v-if="messageYinpin" style="padding:10px 20px 60px ">
                                                <div class="createdGroup-row"  >
                                                       
                                                        <div class="yinpinContent">
                                                            <section class="yinpinPart">
                                                                    <section class="yinpinPart-top displayBetween">                                                                                                                                                                                                    
                                                                        <div class="displayBetween">                                                                                                                                                                                                                   
                                                                            <section class="yinpinPart-imgBox"><img src="../img/yinpinDialog1.png" /></section>                                                                                                                                                        
                                                                            <section style="overflow:hidden;max-width:90px;white-space:nowrap;text-overflow:ellipsis;">                                                                                                                                               
                                                                                <p>{{messageYinpin.name}}</p>                                                                                                                                                                                                                     
                                                                                <p style="margin-top:20px;color:#AEAEAE;">{{messageYinpin.size}}</p>                                                                                                                                                                             
                                                                            </section>                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                                                   
                                                                        </div>                                                                                                                                                                                                                                          
                                                                        <div style="color:#AEAEAE;">                                                                                                                                                                                                                   
                                                                                {{messageYinpin.maxTime}}                                                                                                                                                                                                                      
                                                                        </div>                                                                                                                                                                                                                                         
                                                                    </section>                                                                                                                                                                                                                                          
                                                                     <section class="yinpinPart-bottom displayBetween" style="line-height:40px;">                                                                                                                                                                        
                                                                        <div> 更新时间:{{messageYinpin.updateTime}}</div> <div> </div>                                                                                             
                                                                    </section>    
                                                            </section>
                                                            <section class="operation-box">
                                                                 
                                                                <p @click="deleteMessage('yinpin')"> <img src="../img/deleteBtn.png"> 删除</p>
                                                                <p @click="showWrapDialog('yinpin')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                                            </section>
                                                            
                                                        </div>
                                                        
                                                        
                                                </div>
                                        </section>
                                        
                                    </div>
                                    <div class="radio3-row" :class="{'displayCenter':!messageShipin}" v-show="title2Type==3" >
                                        <section class="radio3-imgBox" style="margin-right:20px" v-if="!messageShipin" @click="showWrapDialog('shipin')">
                                            <img src="../img/shipinsucai.png" />
                                            <p>从素材库中选择</p>
                                        </section>   
                                        <section v-if="messageShipin" style="padding:10px 20px 60px ">
                                                <div class="createdGroup-row">
                                                        
                                                        <div class="shipinContent">
                                                            <section class="shipinPart">
                                                                    <section class="shipinBanner-box">
                                                                            <img :src="messageShipin.shipinImg" />
                                                                    </section>  
                                                                    <section class="displayBetween shipin-des" style="line-height:25px; padding:0 10px">
                                                                        <div>{{messageShipin.name}}</div> <div style="color:#aeaeae">{{messageShipin.size}}</div>
                                                                    </section>   
                                                                    <section class="displayBetween shipin-updateTime" style="line-height:35px;padding:0 10px"> 
                                                                        <div style="color:#797979">更新时间:{{messageShipin.updateTime}}</div> <div></div>    
                                                                    </section>        
                                                            </section>
                                                            <section class="operation-box">
                                                                
                                                                <p @click="deleteMessage('shipin')"> <img src="../img/deleteBtn.png"> 删除</p>
                                                                <p @click="showWrapDialog('shipin')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                                            </section>
                                                            
                                                        </div>
                                                        
                                                        
                                                </div>
                                        </section>
                                    </div>
                                    <div class="radio3-row" :class="{'displayCenter':!messageTuwen}" v-show="title2Type==4" >
                                        <section class="radio3-imgBox" style="margin-right:20px" v-if="!messageTuwen" @click="showWrapDialog('tuwen')">
                                            <img src="../img/tuwensucai.png" />
                                            <p>从素材库中选择</p>
                                        </section>
                                        <section v-if="messageTuwen" style="padding:10px 20px 60px ">
                                                <div class="createdGroup-row">
                                                        
                                                        <div class="imgAndPOI">
                                                            <section class="imgAndPOI-box">
                                                                <img class="box-bannerImg" :src="messageTuwen.tuwenImg"/>
                                                                <div class="positionTital">{{messageTuwen.name}}</div>
                                                               <ul class="imgAndPOI-cont">
                                                                    <li class="displayBetween" v-for="(item,index) in messageTuwen.tuwenArr" :key="index">
                                                                        <p>{{item.text}}</p>
                                                                        <div><img :src="item.img" /></div>
                                                                        
                                                                    </li>
                                                                    
                                                                  
                                                               </ul>
                                                            </section>
                                                            <section class="operation-box">
                                                               
                                                                <p @click="deleteMessage('tuwen')"> <img src="../img/deleteBtn.png"> 删除</p>
                                                                <p @click="showWrapDialog('tuwen')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                                            </section>
                                                            
                                                        </div>
                        
                                        
                                                    </div>
                                        </section>
                                    </div>
                                </section>
                                <!-- 跳转小程序 -->
                                <section class="radio4" v-show="radioValue==3">
                                        <div class="radio4-row">
                                            <span style="display: inline-block;width:80px;text-align:right;margin-right:10px;">跳转小程序:</span>
                                            <label style="margin-right:40px;" :for="'xiaoxhengxuRadio-'+i" class="myLabel" v-for="(lb,i) in ['已授权小程序','自定义小程序']">
                                                <input :id="'xiaoxhengxuRadio-'+i" name="xiaoxhengxuRadio" type="radio" :value="i" v-model="xiaoxhengxuRadio"  />{{lb}}
                                                <span class="xuniRadio"></span> 
                                                <i v-if="i==1"  style="color: #AEAEAE;">(无需绑定公众号)</i>
                                            </label> 
                                        </div>
                                        <div class="radio4-row" v-if="xiaoxhengxuRadio==0">
                                            <span style="display: inline-block;width:80px;text-align:right;margin-right:10px;">选择小程序:</span>
                                            <section id="moniSelect2" class="moniSelect" @click.self="showXiaochengxu" :class="{'lineOne':xiaochengxu=='小程序名称-Appid'}">
                                                    <img class="arrowDown" src="../img/arrowDown2.png" />
                                                    {{xiaochengxu}}
                                                    <ul v-if="ulShow" style="width:280px;">
                                                       <li style="padding:10px 10px;" v-for="(item,index) in xiaochengxuList" :key='index' @click="chooseXiaochengxu(item)">
                                                           <img style="width:32px;height:32px;margin-right:10px;vertical-align: bottom;" :src="item.img" />
                                                           {{item.name}}
                                                       </li>    
                                                    </ul>                  
                                            </section>
                                        </div>
                                        <div class="radio4-row" v-if="xiaoxhengxuRadio==1">
                                                <span style="display: inline-block;width:80px;text-align:right;margin-right:10px;">小程序Appid:</span>
                                               <input v-model="fRelatedProgramAppid2" @blur="blurAppid" /> 
                                        </div>
                                        <div class="radio4-row">
                                                <span style="display: inline-block;width:80px;text-align:right;margin-right:10px;">小程序路径:</span>
                                                <input  v-model="fRelatedProgramPath" @blur="blurUrl" />
                                                <!-- <input :value="fRelatedProgramPath" @input="inputUrl" @blur="blurUrl" /> -->
                                                <!-- <a style="color:#337AB7;margin-left:6px;cursor:pointer;">添加路径</a> -->
                                        </div>
                                        <div class="radio4-row">
                                                <span style="display: inline-block;width:80px;text-align:right;margin-right:10px;">备用URL地址:</span>
                                                <input v-model="fRelatedProgramBakPath" @blur="blurBakPath" />
                                                <a style="color:#337AB7;margin-left:6px;cursor:pointer;" @click="showWrapDialog('tuwen')">图文素材</a>
                                                <a style="color:#337AB7;margin-left:6px;cursor:pointer;" @click="showSucaiDialog">站内链接</a>
                                                <br/>
                                                <span style="color:#999999;margin-left: 90px;">不支持小程序的老版本客户端将打开本url，不超过1024字节</span>
                                        </div>

                                </section>
                                
                                <!-- 关键词 -->
                                <section class="radio5" v-show="radioValue==4">
                                        <span>关键词</span>
                                        <section id="moniSelect3" class="moniSelect" @click.self="showGuanjianci" :class="{'lineOne':guanjianci=='请选择关键词'}">
                                                <img class="arrowDown" src="../img/arrowDown2.png" />
                                                {{guanjianci}}
                                                <ul v-if="ulShow" style="width:280px;height:126px;overflow: auto;">
                                                   <li @click="chooseKeyWords(item)" style="padding:4px 10px;" v-for="(item,i) in keywordsList" :key="i" >
                                                       {{item.name}}
                                                   </li>    
                                                   <p style="color:#CCCCCC;text-align:center;line-height:60px;"  v-if="keywordsList.length==0">无关键词</p> 
                                                </ul>     
                                                       
                                        </section>
                                </section>
                                <section class="radio6" v-show="radioValue==5">
                                        <label  class="myLabel"  :for="'FuncRadio-'+index" v-for="(item,index) in functionList" @click="chooseFunction(item,index)"><input :id="'FuncRadio-'+index" name="FuncRadio" type="radio" :value="index" v-model="funcRadioValue" />{{item}} <span class="xuniRadio"></span> </label>   
                                </section>

                            </div>
                            <div class="intContent-bottom"> 
                                <span>取消</span> <span style="color:#fff;background:#337AB7" @click="saveMenu">保存</span>
                                <div class="successBox">
                                        <img src="../img/loading.gif" v-if="isLoading&&!isSuccess" /> 
                                        <i v-if="isSuccess"><img  src="../img/success.png" />保存成功</i>
                                       
                                </div>
                            </div>
                        </section>
                    </div>
                    <!-- 删除后展示的右侧内容 -->
                    <div class="menuContent-right2" v-if="afterDelete">
                        <p class="afterDel">
                                点击左侧菜单进行编辑操作
                        </p>
                    </div>
               </section>
            </div>
        </div>
        <section class="commonMarsk" v-if="dialogShow">
           <tip-dialog ref="tipDialog" :dialogdata='dialogdata' v-if="dialogShow" @close="closeDialog" :leftbtnhandler="leftBtnHandler" :rightbtnhandler="rightBtnHandler"></tip-dialog>
        </section>
        <sucai-dialog v-if="isAddSucai" @close-sucai-dialog-handel="closeSucaiDialog" @add-sucai="addSucaiDes"></sucai-dialog>
        <wrap-dialog v-if="wrapDialogShow" @choose-item="chooseItem"   @close-wrap-dialog-handel="closeWrapDialog" :dialogtype="dialogtype"></wrap-dialog>
    </div>   


</body>
<!-- 头部 -->
<script src="../common/top-bar.js"></script>
<!-- 左侧导航栏 -->
<script src="../common/left-site.js"></script>
<!-- 提示弹窗 -->
<script src="../common/dialog.js"></script>
<!-- 素材弹框1 -->
<script src="../common/sucai-dialog.js"></script>
<!-- 素材弹框2 -->
<script src="../common/wrap-dialog.js"></script>
<script src="../js/public.js"></script>

<script type="text/javascript" src="../js/jQuery-emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script>
<script type="text/javascript" src="../js/jQuery-emoji/lib/script/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="../js/jQuery-emoji/src/js/jquery.emoji.js"></script>
<script>
    
    new Vue({
        el: '#app',
        data: {
          dialogdata: null,
          dialogShow:false,
          pagetype:'zidingyicaidan',
          //iSshowMenuDescription:false,
          cuurentIndex:0,//0通用菜单1是个性菜单
          curentMenuIndex:-1,//一级菜单的下标
          curentMenuIndex2:-1,//控制一级菜单active
          curentChildIndex:-1,//子菜单的下标
          chooseMenuName:'',
          chooseMenuName2:'',
          menuNameTip:'菜单名称字数不多于12个汉字或24个字母',
          sucaiType:false,//素材类型
          outLength:false,//控制菜单溢出提示
          afterDelete:false,//删除操作之后控制显隐
          radioValue:0,//菜单内容的radio
          funcRadioValue:-1,//微信功能radio

          //微站页面所需字段
          fRelatedPageType:-1,//页面类型的下拉框 0=微站页面 1=微站资源数据 2=会员中心 3=购物车
          fRelatedRedirectPageUrl:'',//跳转页面的URL
          fRelatedRedirectPageId:'',//跳转微站页面主键ID


          ulShow:false,//控制跳转页面下拉菜单显隐
          ulText:'--请选择--',//跳转页面显示内容
          xiaochengxu:'小程序名称-Appid',
          guanjianci:'请选择关键词',
          wrapDialogShow:false,//是否显示wrapDialog
          dialogtype:'',//选择的是什么类型弹框
          urlTo:'',//跳转链接
          title2Type:-1,//0文字1图片2音频3视频5图文
          isAddSucai:false,
          sucaiObj:null,

          //跳转小程序字段
          xiaoxhengxuRadio:0,//跳转小程序选择小程序类型
          fRelatedProgramPath:'',//小程序的路径
          fRelatedProgramBakPath:'',//小程序备用路径
          fRelatedProgramAppid2:'',//小程序appid自定义小程序的用于回显

          editorContent:'',

          isinsertHref:false,//是否显示插入href的弹框
          insertHrefText:'',//插入的href文本内容
          insertHrefText2:'',
          hrefTextTip:'',//文本内容提示
          insertHrefUrl:'',//插入的href链接地址
          zfCount:600,//可以输入多少字
          saveInner:'',
          isLoading:false,//是否展示加载loading
          isSuccess:false,//是否保存成功
          showRight:true,//控制子菜单存在情况下 右侧内容编辑区的显隐
          messageTupian:null,//发送消息的图片存储字段
          messageTuwen:null,//发送消息的图文存储字段
          messageYinpin:null,//发送消息的音频存储字段
          messageShipin:null,//发送消息的视频存储字段
          radioBox:[
              {name:'微站页面',value:0},
              {name:'跳转网页',value:1},
              {name:'发送消息',value:2},
              {name:'跳转小程序',value:3},
              {name:'关键词',value:4},
              {name:'微信功能',value:5},
          ],
          keywordsList:[
              {name:'规则名称1',fId:'001'},
              {name:'规则名称2',fId:'002'},
              {name:'规则名称3',fId:'003'},
              {name:'规则名称4',fId:'004'},
              {name:'规则名称5',fId:'005'},
              {name:'规则名称6',fId:'006'},
              {name:'规则名称7',fId:'007'},
              {name:'规则名称8',fId:'008'},
              {name:'规则名称9',fId:'009'},
              {name:'规则名称10',fId:'0010'},
          ],
          functionList: [
              '扫一扫',
              '打开手机拍照功能',
              '打开手机拍照或者相册',
              '打开系统相册',
              '使用地理位置'
          ],
          weizhan:[//微站列表
            {name:'微站001',fRelatedRedirectPageId:'id1',fRelatedRedirectPageUrl:'WpppWW.EREEI'},
            {name:'微站002',fRelatedRedirectPageId:'id2',fRelatedRedirectPageUrl:'ddddW.EREEI'},
            {name:'微站003',fRelatedRedirectPageId:'id3',fRelatedRedirectPageUrl:'cccW.EREEI'},
          ],
          xiaochengxuList:[//选择小程序
            {fId:'01',name:'小程序1',url:'path/fee.aw/ewgw',appId:'ss1231w',img:'../img/POIdialog.png'},
            {fId:'02',name:'小程序2',url:'path/aaaa.aw/ewgw',appId:'22222aaaa',img:'../img/u382.png'},
            {fId:'03',name:'小程序3',url:'path/raq1.aw/ewgw',appId:'33333aaaa',img:'../img/u497.png'},
          ],
          languages: [
              {keys:'zh_CN',values:'简体中文'},
              {keys:'zh_TW',values:'繁体中文TW'},
              {keys:'zh_HK',values:'繁体中文HK'},
              {keys:'en',values:'英文 '},
              {keys:'id',values:'印尼 '},
              {keys:'ms',values:'马来 '},
              {keys:'es',values:'西班牙'},
              {keys:'ko',values:'韩国 '},
              {keys:'it',values:'意大利 '},
              {keys:'ja',values:'日本 '},
              {keys:'pl',values:'波兰 '},
              {keys:'pt',values:'葡萄牙 '},
              {keys:'ru',values:'俄国 '},
              {keys:'th',values:'泰文 '},
              {keys:'vi',values:'越南 '},
              {keys:'ar',values:'阿拉伯语 '},
              {keys:'hi',values:'北印度'},
              {keys:'he',values:'希伯来'},
              {keys:'tr',values:'土耳其  '},
              {keys:'de',values:'德语  '},
              {keys:'fr',values:'法语  '}
           

          ],
          menuParts:[
          ],
        },
        created:function() {
            //public.ceshi()
        },
        mounted:function() {
            //this.$refs['topbar'].ce();
            let that =this;
            document.addEventListener('click',that.bindClick)
            if(that.zfCount>4){
                    $("#editorMenu").emoji({ 
                        button: "#btn1",
                        showTab: false,
                        animation: 'slide',
                        icons: [{
                            name: "QQ表情",
                            path: "../js/jQuery-emoji/dist/img/qq/",
                            maxNum: 50,
                             //excludeNums: [41, 45, 54],
                            file: ".gif",
                            placeholder: ":{alias}:",
                            alias:{
                                1: "hehe",
                                2: "haha",
                                3: "tushe",
                                4: "a",
                                5: "ku",
                                6: "lu",
                                7: "kaixin",
                                8: "han",
                                9: "lei",
                                10: "heixian",
                                11: "bishi",
                                12: "bugaoxing",
                                13: "zhenbang",
                                14: "qian",
                                15: "yiwen",
                                16: "yinxian",
                                17: "tu",
                                18: "yi",
                                19: "weiqu",
                                20: "huaxin",
                                21: "hu",
                                22: "xiaonian",
                                23: "neng",
                                24: "taikaixin",
                                25: "huaji",
                                26: "mianqiang",
                                27: "kuanghan",
                                28: "guai",
                                29: "shuijiao",
                                30: "jinku",
                                31: "shengqi",
                                32: "jinya",
                                33: "pen",
                                34: "aixin",
                                35: "xinsui",
                                36: "meigui",
                                37: "liwu",
                                38: "caihong",
                                39: "xxyl",
                                40: "taiyang",
                                41: "qianbi",
                                42: "dnegpao",
                                43: "chabei",
                                44: "dangao",
                                45: "yinyue",
                                46: "haha2",
                                47: "shenli",
                                48: "damuzhi",
                                49: "ruo",
                                50: "OK"


                            }
                            
                        }
                    ]
                    });
                }
            $('#emoji0 ul li').each(function(item,v){
                $(v).on('click',function(){
                    if(that.zfCount<4){return}
                    
                    that.zfCount -= 4
                })
            })

        },
        destroyed:function(){
            let that =this;
            document.removeEventListener('click',that.bindClick)
        },
        computed:{
            intContentTitle:function() {
                switch(this.radioValue){
                    case 0:
                        return '粉丝点击该菜单会跳转指定的微站素材：'
                    case 1:
                        return '粉丝点击该菜单会跳转指定的网站或图文内容：'
                    case 3:
                        return '跳转的目标小程序无需绑定该公众号'
                    case 4:
                        return '粉丝点击该菜单会触发关键词设定的自动回复内容：'
                    case 5:
                        return '粉丝点击该菜单会调用以下系统功能：'
                }
            },
            urlToVerify:function(){
                let URLReg = /[http://|www.|https://]?\w+\.\w/;
                if(this.urlTo&&!URLReg.test(this.urlTo)){
               
                return true
             }
            },
            hrefTextVerify:function(){//href弹框里面text输入框的验证
                if(!this.insertHrefText){
                    this.hrefTextTip='请输入内容'
                    return true;
                }else if(public.gblen(this.insertHrefText)>50){
                    this.hrefTextTip='不得超过50个字符！'
                    return true;
                }
                else{
                    return false;
                }
            },
            hrefUrlVerify:function(){//href弹框里面url输入框的验证
                if(!this.insertHrefUrl){
                    return true
                }else{
                    return false
                }
            },
            nowObj:function(){
                if(this.curentChildIndex==-1){
                    return this.menuParts[this.curentMenuIndex]   
                }else{
                    return this.menuParts[this.curentMenuIndex].children[this.curentChildIndex]
                }
            },
           
        },
        watch:{
            nowObj:{
                handler:function(value) {
                    console.log(value,'vvvvvvvvvvvvvvvvvv')
                },
                deep:true
            },
            xiaoxhengxuRadio:function(newv,oldv){//跳转小程序类型
          
                this.nowObj.fRelatedProgramType = newv
            },
          
            urlTo:function(newv,oldv){//观察 跳转网页部分的跳转链接
                let URLReg = /[http://|www.|https://]?\w+\.\w/;
                if(URLReg.test(this.urlTo)&&this.urlTo){
                    this.nowObj.fRelatedRedirectPageUrl2 = this.urlTo
                }else{
                    this.nowObj.fRelatedRedirectPageUrl2=null
                }
            },
            radioValue:function(newv,oldv) {//观察内容切换radio 实时保存每个菜单的切换状态
                this.nowObj.fRelatedType =newv;
            },
           
            fRelatedRedirectPageId:function(newv,oldv){
                console.log(newv,oldv,'fRelatedRedirectPageId')
                this.nowObj.fRelatedRedirectPageId = newv;
                this.nowObj.ulText = this.ulText;
                this.nowObj.fRelatedRedirectPageUrl = this.fRelatedRedirectPageUrl;
            },
            chooseMenuName:function(newv,oldv) {
                //console.log(newv,oldv,'chooseMenuName')
                if(this.curentChildIndex==-1){//如果选的是一级菜单
                    this.menuParts[this.curentMenuIndex].fName = newv
                }else{
                    this.menuParts[this.curentMenuIndex].children[this.curentChildIndex].fName =newv
                } 
            },
            curentMenuIndex:function(newv,oldv){//回显 根据主菜单下标回显对应下标里面的内容
                //console.log(newv,oldv,'curentMenuIndex')

                if(newv>-1){
                    this.chooseMenuName = this.nowObj.fName//回显菜单内容

                    if(this.nowObj.children.length==0){
                        //回显微站页面部分
                        this.radioValue = this.menuParts[newv].fRelatedType?this.menuParts[newv].fRelatedType:0//回显菜单内容 选项radio
                        this.fRelatedPageType = this.menuParts[newv].fRelatedPageType?this.menuParts[newv].fRelatedPageType:-1//回显微站页面的页面类型
                        this.fRelatedRedirectPageId = this.menuParts[newv].fRelatedRedirectPageId?this.menuParts[newv].fRelatedRedirectPageId:''//跳转页面的id
                        this.ulText = this.menuParts[newv].ulText?this.menuParts[newv].ulText:'--请选择--'//回显跳转页面的内容
                        this.fRelatedRedirectPageUrl = this.menuParts[newv].fRelatedRedirectPageUrl?this.menuParts[newv].fRelatedRedirectPageUrl:''//回显页面链接
                        //回显跳转网页部分
                        this.urlTo = this.nowObj.fRelatedRedirectPageUrl2?this.nowObj.fRelatedRedirectPageUrl2:''
                        //回显跳转小程序部分
                        this.xiaoxhengxuRadio = this.nowObj.fRelatedProgramType?this.nowObj.fRelatedProgramType:0//跳转小程序的类型
                        this.xiaochengxu = this.nowObj.appidName?this.nowObj.appidName:'小程序名称-Appid';
                        this.fRelatedProgramPath = this.nowObj.fRelatedProgramPath?this.nowObj.fRelatedProgramPath:''
                        this.fRelatedProgramBakPath = this.nowObj.fRelatedProgramBakPath?this.nowObj.fRelatedProgramBakPath:'';
                        this.fRelatedProgramAppid2 = this.nowObj.fRelatedProgramAppid2;
                        //回显关键词部分
                        this.guanjianci = this.nowObj.fRelatedKeywordId?this.nowObj.fRelatedKeywordName:'请选择关键词'
                        //回显微信功能部分
                        this.funcRadioValue = this.nowObj.fRrelatedFunctionType>-1?this.nowObj.fRrelatedFunctionType:-1

                        //发送消息回显

                         //消息类型回显
                         this.title2Type = this.nowObj.messageType>-1?this.nowObj.messageType:-1;
                         //文字回显
                        this.editorContent = this.nowObj.wenziContent?this.nowObj.wenziContent:'';
                        this.zfCount =  this.nowObj.zfCount?this.nowObj.zfCount:600;
                        //图片对象回显
                        this.messageTupian = this.nowObj.messageTupian?this.nowObj.messageTupian:null;
                        //图文对象回显
                        this.messageTuwen = this.nowObj.messageTuwen?this.nowObj.messageTuwen:null;
                        //音频对象回显
                        this.messageYinpin = this.nowObj.messageYinpin?this.nowObj.messageYinpin:null;
                        //视频对象回显
                        this.messageShipin = this.nowObj.messageShipin?this.nowObj.messageShipin:null;
                    }
                }
            },
            curentChildIndex:function(newv,oldv){
                if(this.curentChildIndex!=-1){
                    this.chooseMenuName = this.menuParts[this.curentMenuIndex].children[newv].fName
                    //回显微站页面部分
                    this.radioValue = this.nowObj.fRelatedType?this.nowObj.fRelatedType:0;////回显菜单内容 选项radio
                    this.fRelatedPageType = this.nowObj.fRelatedPageType?this.nowObj.fRelatedPageType:-1//回显微站页面的页面类型
                    this.fRelatedRedirectPageId = this.nowObj.fRelatedRedirectPageId?this.nowObj.fRelatedRedirectPageId:''//跳转页面的id
                    this.ulText = this.nowObj.ulText?this.nowObj.ulText:'--请选择--'//回显跳转页面的内容
                    this.fRelatedRedirectPageUrl = this.nowObj.fRelatedRedirectPageUrl?this.nowObj.fRelatedRedirectPageUrl:''//回显页面链接
                    //回显跳转网页部分
                    this.urlTo = this.nowObj.fRelatedRedirectPageUrl2?this.nowObj.fRelatedRedirectPageUrl2:''
                    //回显跳转小程序部分
                    this.xiaoxhengxuRadio = this.nowObj.fRelatedProgramType?this.nowObj.fRelatedProgramType:0//跳转小程序的类型
                    this.xiaochengxu = this.nowObj.appidName?this.nowObj.appidName:'小程序名称-Appid';
                    this.fRelatedProgramPath = this.nowObj.fRelatedProgramPath?this.nowObj.fRelatedProgramPath:''
                    this.fRelatedProgramBakPath = this.nowObj.fRelatedProgramBakPath?this.nowObj.fRelatedProgramBakPath:'';
                    this.fRelatedProgramAppid2 = this.nowObj.fRelatedProgramAppid2;
                    //回显关键词部分
                    this.guanjianci = this.nowObj.fRelatedKeywordId?this.nowObj.fRelatedKeywordName:'请选择关键词'
                    //回显微信功能部分
                    this.funcRadioValue = this.nowObj.fRrelatedFunctionType>-1?this.nowObj.fRrelatedFunctionType:-1

                    //发送消息回显
                         //文字回显
                    this.editorContent = this.nowObj.wenziContent?this.nowObj.wenziContent:'';
                    this.zfCount =  this.nowObj.zfCount?this.nowObj.zfCount:600;
                    //图片对象回显
                    this.messageTupian = this.nowObj.messageTupian?this.nowObj.messageTupian:null;
                    //图文对象回显
                    this.messageTuwen = this.nowObj.messageTuwen?this.nowObj.messageTuwen:null;
                    //音频对象回显
                    this.messageYinpin = this.nowObj.messageYinpin?this.nowObj.messageYinpin:null;
                    //视频对象回显
                    this.messageShipin = this.nowObj.messageShipin?this.nowObj.messageShipin:null;
                }else{
                    if(this.curentMenuIndex!=-1){
                        this.chooseMenuName = this.menuParts[this.curentMenuIndex].fName
                    } 
                }  
            },
        },
        methods: {
            blurAppid:function(){//失焦本地保存小程序appid

                this.nowObj.fRelatedProgramAppid2 = this.fRelatedProgramAppid2;
            },
            blurBakPath:function(){//失焦本地存储小程序路径
            console.log('blur')
                this.nowObj.fRelatedProgramBakPath = this.fRelatedProgramBakPath;
            },
            blurUrl:function(){
                this.nowObj.fRelatedProgramPath =  this.fRelatedProgramPath;
                console.log(this.nowObj)
            },
            deleteMessage:function(type){//发送消息图片 音频 视频 图文的删除操作
                if(type=='tupian'){
                    this.messageTupian = null;
                    this.nowObj.messageTupian = this.messageTupian;
                }else if(type=='yinpin'){
                    this.messageYinpin = null;
                    this.nowObj.messageYinpin = this.messageYinpin;
                }else if(type=='shipin'){
                    this.messageShipin = null;
                    this.nowObj.messageShipin = this.messageShipin;
                }else if(type=='tuwen'){
                    this.messageTuwen = null;
                    this.nowObj.messageTuwen = this.messageTuwen;
                }
            },
            uploadFile:function(eve){//上传图片
                let file = eve.target.files[0];
                if(file!=null){
                    let data = new FormData();
                    data.append("uploadFile",file);
                    let _this = this
                    $.ajax({
                        type:"post",
                        url: "http://www.dev-zuma.com/upLoadFile/uploadMultiFile?_=" + Math.random(),
                        data:data,
                        processData:false,
                        contentType:false,
                        success:function(result){
                            console.log(result)
                            _this.messageTupian={
                                name:file.name,
                                imgUrl:result.items[0].url
                            }
                            _this.nowObj.messageTupian=_this.messageTupian
                  
                        }
                    });
                }
            },
            showSucaiDialog:function(){
                this.isAddSucai = true
            },
            chooseFunction:function(item,index){
                this.nowObj.fRrelatedFunctionType = index;//微信功能类型
                this.nowObj.fRrelatedFunctionName = item

            },
            chooseXiaochengxu:function(item){//跳转小程序页面的已授权小程序中的选择小程序
                console.log(item)
                this.ulShow = false
                this.xiaochengxu = item.name+'-'+item.appId;
                this.nowObj.appidName = this.xiaochengxu;
                this.nowObj.fRelatedProgramId = item.fId;//获取小程序的id；
                this.nowObj.fRelatedProgramAppid = item.appId;//获取小程序的appid；
                this.nowObj.fRelatedProgramPath = item.url;//小程序路径
                this.fRelatedProgramPath = item.url
            },
            choosePageType:function(item) {
                this.reloadWeizhan()
                let obj;
                if(this.curentChildIndex==-1){//如果选的是一级菜单
                     obj = this.menuParts[this.curentMenuIndex]
                }else{
                    obj = this.menuParts[this.curentMenuIndex].children[this.curentChildIndex]
                }
                if(item==2||item==3){//如果是会员或者购物车
                    this.fRelatedRedirectPageUrl = '会员或者购物车的url';
                    obj.fRelatedRedirectPageUrl='会员或者购物车的url';
                }
                obj.fRelatedPageType = item;
                
            },
            reloadWeizhan:function(){//重置微站页面的数据
                this.ulText="--请选择--";
                //this.fRelatedRedirectPageId = null;
                this.fRelatedRedirectPageUrl = null;
                this.sucaiObj=null;
            },
            saveMenu:function(){//保存菜单
                this.isLoading= true;
                setTimeout(() => {
                    this.isLoading= false;
                    this.isSuccess = true
                }, 1000);

                //获取菜单类型
                let fType =this.cuurentIndex;
                //判断是否是子菜单
                let isChild = this.curentChildIndex==-1?false:true;
                
                //获取主菜单的下标
                let mainMenuIndex = this.curentMenuIndex;
                //获取菜单的名字
                let fName = this.chooseMenuName;
                //获取菜单内容类型
                let  fRelatedType = this.radioValue;
                let obj={
                    fType:fType,
                    fName:fName,
                    fRelatedType:fRelatedType-1,
                    isChild:isChild,//不必穿
                    mainMenuIndex:mainMenuIndex,//不必穿
                    children:[]
                }
                this.menuParts[mainMenuIndex] = obj;
                console.log(obj,this.menuParts);
            },
            chooseTitle2:function(index){//选择发送消息的文字 图片音频视频 图文切换
                this.title2Type = index;
                this.nowObj.messageType =index;
            },
            chooseKeyWords:function(item){//关键词选择
                this.guanjianci = item.name
                this.nowObj.fRelatedKeywordId = item.fId//关键字主键id
                this.nowObj.fRelatedKeywordName = item.name;//
                this.ulShow = false;
            },
            chooseItem:function(v,t){//选择素材框内的跳转链接
                console.log(v,t,'vvvvvvvvvvvv')
                this.urlTo = v.url;
                this.wrapDialogShow = false;
                if(t=='tupian'){
                    this.messageTupian={
                        name:v.fName,
                        imgUrl:v.img
                    }
                    this.nowObj.messageTupian = this.messageTupian
                }else if (t=='yinpin') {
                    this.messageYinpin={
                        name:v.fName,
                        size:v.fSize,
                        maxTime:v.maxTime,
                        updateTime:v.updateTime
                    }
                    this.nowObj.messageYinpin = this.messageYinpin
                }else if (t=='shipin') {
                    this.messageShipin={
                        name:v.fName,
                        size:v.fSize,
                        shipinImg:v.shipinImg,
                        updateTime:v.updateTime
                    }
                    this.nowObj.messageShipin = this.messageShipin
                }
                else if (t=='tuwen') {
                    this.messageTuwen={
                        name:v.fName,
                        tuwenImg:v.tuwenImg,
                        tuwenArr:v.tuwenArr,
                       
                    }
                    this.nowObj.messageTuwen = this.messageTuwen
                }
            },
            showWrapDialog:function(type){//添加图文链接
                this.wrapDialogShow = true;
                this.dialogtype = type;
            },
            closeWrapDialog:function(){
                this.wrapDialogShow = false;
            },
           closeSucaiDialog:function(){
              this.isAddSucai = false
            },
           deleteSucai:function(){//删除当前素材
                this.sucaiObj = null;
           },
           addSucaiDes:function(v){//获取添加的素材内容以及类型
                console.log(v,'选择的素材内容们')
                if(this.curentChildIndex==-1){//如果选的是一级菜单
                    let obj = this.menuParts[this.curentMenuIndex];
                    let datas = v.li;
                    obj.fRelatedMediaSku= datas.SKU;//关联商品的sku
                    obj.fRelatedMediaId = datas.ids;//关联素材的ID
                    obj.fRelatedMediaPic = datas.mainImg;//关联的素材图片地址
                    obj.fRelatedMediaName = datas.name;//关联素材的名称
                    obj.fRelatedMediaCode ='';//关联素材的编号
                    obj.fRelatedMediaTxt ='';//关联的消息文本


                }
                this.sucaiObj = v;
                this.isAddSucai = false
           },
           addSucai:function(){
              this.isAddSucai = true
           },
           bindClick:function(e){
               
                let moniSelect1 = document.getElementById('moniSelect1')
                let moniSelect2 = document.getElementById('moniSelect2')
                let moniSelect3 = document.getElementById('moniSelect3')
                let moniSelect;
                if(this.radioValue==0){
                    moniSelect=moniSelect1
                }else if (this.radioValue==3) {
                    moniSelect=moniSelect2
                }else if (this.radioValue==4) {
                    moniSelect=moniSelect3
                }
                //console.log(moniSelect&&!moniSelect.contains(e.target))
                if(moniSelect&&!moniSelect.contains(e.target)){
                    this.ulShow = false;
                }
                // else if(moniSelect2&&!moniSelect2.contains(e.target)) {
                //     this.ulShow = false;
                // }
                
          },
          chooseWeizhanPage:function(item){
            this.ulText = item.name;
            this.fRelatedRedirectPageUrl = item.fRelatedRedirectPageUrl;
            this.fRelatedRedirectPageId = item.fRelatedRedirectPageId;
            this.ulShow = false;
          },
          showUl:function(){
            this.ulShow = true;
          },
          showXiaochengxu:function(){
              //展示选择小程序下拉框
              this.ulShow = true;
          },
          showGuanjianci:function(){
              //展示选择关键词下拉框
              this.ulShow = true;
          },
          chooseRadio:function(i){
              this.radioValue=i;
              console.log(this.radioValue,'radio的值')
          },
          deleteMenu:function(){//删除菜单
            let name;
            let that = this;
            if(this.curentChildIndex==-1){//如果是一级菜单
                 name = this.menuParts[this.curentMenuIndex].fName;
                console.log(name,'一级菜单的名字');
                that.rightBtnHandler = function(){//弹框右边按钮事件
                    that.menuParts.splice(that.curentMenuIndex,1)
                    that.dialogShow = false;
                    that.afterDelete =that.menuParts.length==0? false:true;
                    that.curentMenuIndex=-1;//一级菜单的下标
                    that.curentMenuIndex2=-1;//控制一级菜单active
                    that.curentChildIndex=-1;//子菜单的下标
                 }

            }else{
                 name = this.menuParts[this.curentMenuIndex].children[this.curentChildIndex].fName;
                console.log(name,'二级菜单的名字')
                that.rightBtnHandler = function(){//弹框右边按钮事件
                    that.menuParts[that.curentMenuIndex].children.splice(that.curentChildIndex,1)
                    that.dialogShow = false;
                    that.afterDelete = true
                    that.curentMenuIndex=-1;//一级菜单的下标
                    that.curentMenuIndex2=-1;//控制一级菜单active
                    that.curentChildIndex=-1;//子菜单的下标
                 }
            }

               this.dialogdata={
                    content:'删除后"'+name+'"菜单设置的内容将被删除！确认删除?',
                    btnLeft:'取消',
                    btnRight:'确认',
                }
                this.dialogShow = true;
               
               
          },
          blurMenuName:function(){//失焦后若是空的名字恢复默认名字
              //console.log(this.chooseMenuName,'????失焦')
              if (!this.chooseMenuName) {
                  this.chooseMenuName = '菜单名称'
              }
          },
          inputMenuName:function(){//键入菜单名称
            this.outLength = false;
            let len = public.gblen(this.chooseMenuName);
            console.log(len,'字节长度')
            let compareLen =this.curentChildIndex==-1?10:24;
            this.menuNameTip = this.curentChildIndex==-1?'菜单名称字数不多于5个汉字或10个字母':'菜单名称字数不多于12个汉字或24个字母'
            if(len<=compareLen){
                this.chooseMenuName2 = this.chooseMenuName
            }else{
                this.outLength = true;
                this.chooseMenuName = this.chooseMenuName2
            }
          },
          chooseChildMenu:function(index,child){//选择二级菜单
            this.showRight = true
            this.afterDelete = false;//显示右侧内容区域
            this.curentChildIndex = index;
            this.curentMenuIndex2 =-1;//重置取消一级菜单的active样式
            //this.chooseMenuName = child.fName
          },
          addChildMenu:function(itemChildren,index){//增加子菜单
            this.showRight = true
            this.radioValue = 0;//重置菜单内容选项按钮为0
            this.afterDelete = false;//显示右侧内容区域
            this.curentMenuIndex2 =-1;//重置取消一级菜单的active样式
            if(!itemChildren||itemChildren.length==0){//如果没有子菜单则提示弹框
                this.dialogdata={
                    content:'添加子菜单后，一级菜单的内容将被清除。确定添加子菜单?',
                    btnLeft:'取消',
                    btnRight:'确认',
                }
                this.dialogShow = true;
                let that = this;
                that.rightBtnHandler = function(){//弹框右边按钮事件
                    that.dialogShow = false;
                    that.menuParts[that.curentMenuIndex].children.push({fId:'11',fName:'新建子菜单'})
                    let menuPartsLen =  that.menuParts[that.curentMenuIndex].children.length;
                    that.curentChildIndex = menuPartsLen-1
                    console.log(menuPartsLen,'11111子菜单长度')
                    that.dialogShow = false;
                }

            }else{
                this.menuParts[index].children.push({fId:'11',fName:'新建子菜单',fRelatedType:0})
                let menuPartsLen =  this.menuParts[index].children.length;
                this.curentChildIndex = menuPartsLen-1
                console.log(menuPartsLen,'子菜单长度')
            }
           
          },
          chooseMainMenu:function(index,item){//选择一级菜单
            this.curentChildIndex = -1;//重置子菜单选中样式
            this.curentMenuIndex = index;
            this.curentMenuIndex2 = index;
            this.afterDelete = false;//显示右侧内容区域
            console.log(this.nowObj.children.length,'长度呢')
            let childrenLen = this.nowObj.children.length;
            if(childrenLen>0){
              
                this.showRight = false
            }else{
                this.showRight = true
            }
            //this.chooseMenuName = item.mainMenu
          },
         
          addNewMain:function(){//新增主菜单
            this.showRight = true
            this.fRelatedPageType=-1;//重置页面类型
            this.ulText = "--请选择--"
            this.radioValue = 0;//重置菜单内容选项按钮为0
            this.curentChildIndex = -1;//重置子菜单选中样式
            this.menuParts.push({fName:'菜单名称',fRelatedType:0,children:[]})
             let menuPartsLen = this.menuParts.length ||0;
             //console.log(menuPartsLen,'len')
            this.curentMenuIndex = menuPartsLen-1
            this.curentMenuIndex2 = menuPartsLen-1
            this.afterDelete = false;//显示右侧内容区域
            //console.log(this.curentMenuIndex)
          },
          chooseMenu:function(index) {
              this.cuurentIndex=index
          },
          //文本输入框失焦 保存到本地
          editorBlur:function(e){
            let htmlLen = public.gblen(e.target.innerText);
            console.log(e.target.innerHTML);
            this.nowObj.wenziContent = e.target.innerHTML;
            this.nowObj.zfCount = this.zfCount
          },
           //文字输入框键入
          editorInput:function(e){
            let htmlLen = public.gblen(e.target.innerText);
            
            if(this.zfCount<1){
                e.target.innerHTML = this.saveInner.substring(0,htmlLen);
                this.keyAction('editorMenu')
            }else{
                this.saveInner = e.target.innerHTML
            }
            //console.log(e.target.innerText,'----------------',e.target.innerHTML,'html');
            //console.log(e.target.getElementsByTagName('img'),'img类数组');
            //console.log(e.target.children,'所有元素')
            //console.log(this.gblen(e.target.innerText),this.gblen(e.target.innerHTML),'输入框内容长度')
            let imgList = e.target.getElementsByTagName('img')
            this.zfCount= 600 - public.gblen(e.target.innerText)
            console.log(imgList,'lllllllllllllllllllllllllllllll')
            let insertArr = [];
            let emojiArr = [];
            for (let i = 0; i <imgList.length; i++) {
                   if(imgList[i].className == 'fans'|| imgList[i].className == 'nickname'){   
                    insertArr.push(i);
                   }else{  
                    emojiArr.push(i)
                   }
            }
            if(insertArr.length>0){
                this.zfCount = this.zfCount - insertArr.length*10
            }
            if(emojiArr.length>0){
                this.zfCount = this.zfCount - emojiArr.length*4
            }
          },
          //解决光标置前问题
          keyAction:function(obj) {
            var textbox = document.getElementById(obj);
            var sel = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(textbox);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
          },
          insertFans:function(){
            if(this.zfCount<10){return}
            let fansImg = document.createElement("img");
            fansImg.src="../img/insertFans.png";
            fansImg.alt='插入粉丝'
            fansImg.className="fans";
            this.zfCount-=10
            document.getElementById('editorMenu').append(fansImg)
          },
          insertName:function(){
            if(this.zfCount<10){return}
            let nameImg = document.createElement('img');
            nameImg.src='../img/insertName.png';
            nameImg.alt='插入昵称';
            nameImg.className='nickname';
            this.zfCount-=10
            document.getElementById('editorMenu').append(nameImg)
          },
          insertHref:function(){//点开与取消超链接弹框
            this.isinsertHref = !this.isinsertHref;
          },
          inputHrefText:function(){
            console.log(public.gblen(this.insertHrefText))
            if(public.gblen(this.insertHrefText)<50){
                this.insertHrefText2 = this.insertHrefText
            }else{

                this.insertHrefText = this.insertHrefText2
            }
          },
          saveHref:function(){//保存超链接
            if(this.zfCount<public.gblen(this.insertHrefText)){return}
           let insertA = document.createElement('a');
           insertA.innerHTML=this.insertHrefText;
           insertA.href=this.insertHrefUrl
           insertA.className='insertA'
           insertA.title=this.insertHrefUrl
           document.getElementById('editorMenu').append(insertA)
           this.zfCount= this.zfCount - public.gblen(this.insertHrefText)
           this.isinsertHref = !this.isinsertHref;
          },

          closeDialog:function(v){//关闭弹框
                this.dialogShow = v;
          },
          leftBtnHandler:function(){//左边按钮的事件方法
            this.dialogShow = false;
              alert('左边按钮的触发事件')
          },
          rightBtnHandler:function() {//右边按钮的事件方法
             //alert('右边边按钮的触发事件')
          }
        },
    })
</script>

</html>